<template>
    <div class="app">
        <ul class="talkBox" ref="ulDOM">
            <li v-for="(item, index) in list" :key="index">
                <div class="img">
                    <img src="./assets/me.jpg" width="100%">
                </div>
                <div class="talkBoxLiContent">
                    <span>{{ item }}
                    </span>
                </div>
            </li>
        </ul>
    </div>
</template>
<script lang="ts" setup name=''>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'

let list: any = ref([])
let ulDOM = ref()
//https://api.uomg.com/api/rand.qinghua?format=json
async function getTalk() {
    let res = await axios({
        url: 'https://api.uomg.com/api/rand.qinghua?format=json',
        method: 'get'
    })

    // console.log(res.data.content);
    list.value.push(res.data.content)
    // console.log(list.value);

}

let tick = 1000
let timer = setInterval(async () => {
    await getTalk()
    // console.log(ulDOM.value);
    //让自动下拉到最新位置
    window.scrollTo(0, ulDOM.value.scrollHeight)
}, tick)
getTalk()

onMounted(() => {
    let flag = true
    window.addEventListener('wheel', () => {
        // console.log(1);
        if (flag) {
            flag = false
            clearInterval(timer)
            //不滚动超过2秒后
            setTimeout(() => {
                timer = setInterval(async () => {
                    await getTalk()
                    // console.log(ulDOM.value);
                    //让自动下拉到最新位置
                    window.scrollTo(0, ulDOM.value.scrollHeight)
                }, 1000)
                flag = true
            }, tick)
        }
    })
})
</script>
<style scoped lang="less">
.talkBox {
    width: 100vw;
    line-height: 120%;
    box-sizing: border-box;
    list-style: none;
    position: relative;

    li {
        width: 100%;
        position: relative;
        margin-top: 20px;
    }

    div {
        display: inline-block;
    }

    .img {
        position: absolute;
        margin: 0px 20px 0 -20px;
        width: 50px;
        // background-color: pink;
        border-radius: 4px;
        overflow: hidden;
    }

    .talkBoxLiContent::before {
        content: '';
        border: transparent 10px solid;
        border-right: rgb(234, 234, 234) 10px solid;
        position: absolute;
        // top: 50%;
        // transform: translateY(-50%);
        left: -19px;
    }

    .talkBoxLiContent {
        position: absolute;
        // width: 80%;
        max-width: 600px;
        left: 54px;
        background-color: rgb(234, 234, 234);
        color: rgb(33, 33, 33);
        padding: 10px;
        border: rgb(45, 45, 45);
        position: relative;
        border-radius: 5px;
    }
}


@media screen and (max-width: 680px) {
    .talkBox .talkBoxLiContent {
        max-width: 75vw;
    }
}

@media screen and (max-width: 600px) {
    .talkBox .talkBoxLiContent {
        max-width: 70vw;
    }
}
</style>